<style lang="sass" scoped>
    .search-cont{
        height:122px;
        padding:24px 0 24px 38px;
        align-items:center;
        .back{
            width:22px;
            height:38px;
            margin-right:20px;
            transform: rotate(180deg);
        }
        .search-input{
            width:580px;
            height:100%;
            border-radius:37px;
            background:#e6e6e6;
            align-items:center;
            padding:0 24px;
            .icon{
                width:44px;
                height:44px;
            }
            input{
                background:#e6e6e6;
                border:0;
                flex:1;
                color:#3c3c3c;
                font-size:28px;
                margin: 0 18px;
            }
            .del{
                width:24px;
                height:24px;
            }
        }
        .search{
            flex:1; 
            display:flex;
            justify-content:center;
            align-items:center;
            font-size:28px;
            color:#ff1e1e;
        }
    }
    .cont{
        padding-top:10px;
        background:#e6e6e6;
        .group{
            background:#fff;
            margin-bottom:10px;
            padding:18px 36px;
            .img{
                width:262px;
                height:262px;
                background:#ccc;
                img{
                    display:block;
                    width:100%;
                    height:100%;
                }
            }
            .detail{
                width:388px;
                margin-left:30px;
                flex-direction: column;
                .detail-cont{
                    flex:1;
                    .name{
                        font-size:28px;
                        color:#3c3c3c;
                    }
                    .title{
                        font-size:22px;
                        color:#3c3c3c;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                    .paid{
                        font-size: 22px;
                        color: #bebebe;
                    }
                }
                .buy{
                    height: 56px;
                    justify-content: space-between;
                    .price{
                        width: 200px;
                        color: #ff6e6e;
                        .currency{
                            font-size: 22px
                        }
                        .big{
                            font-size: 44px;
                        }
                        .small{
                            font-size: 34px;
                        }
                    }
                    .btn{
                        width: 160px;
                        height: 56px;
                        line-height: 56px;
                        text-align: center;
                        font-size: 34px;
                    }
                }
            }
        }
        .group:nth-child(2n-1){
            .btn{
                background: #ff6e6e;
                color: #fff;
                border:1px solid #ff6e6e;
            }
        }
        .group:nth-child(2n){
            .btn{
                background: #fff;
                color: #ff6e6e;
                border:1px solid #ff6e6e;
            }
        }
    }
    .no-list{
        background:#fff;
        padding-top:180px;
        img{
            width:329px;
            height:432px;
            display:block;
            margin:0 auto;
        }
    }
</style>
<template>
    <div class="container">
        <div class="search-cont flex">
            <img @click="goBack()" class="back" src="../../assets/images/home/jr.png" alt="">
            <div class="search-input flex">
                <img @click="getList()" class="icon" src="../../assets/images/home/ssjm_ss.png" alt="">
                <input @keyup.enter="getList()" v-model.trim="keyWord" type="text">
            </div>
            <div @click="getList()" class="search">搜索</div>
        </div>
        <div v-if="list.length>0" class="cont">
            <router-link :to="{name:'detail',query:{itemCode:item.itemCode}}" tag="div" v-for="(item,i) in list" class="group flex">
                <div class="img">
                    <img :src="item.mainImageUrl" alt="">
                </div>
                <div class="detail flex">
                    <div class="detail-cont">
                        <div class="name">{{item.itemName}}</div>
                        <div class="title">{{item.itemDesc}}</div>
                        <div class="paid">{{item.buyCount}}人付款</div>
                    </div>
                    <div class="buy flex">
                        <div class="price">
                            <span class="currency">￥</span>
                            <span class="big">{{item.price}}</span>
                            <!-- <span class="small"></span> -->
                        </div>
                        <div @click.stop="addBook(item)" class="btn">加入书袋</div>
                    </div>
                </div>
            </router-link>
        </div>
        <div v-if="firstSearch&&list.length===0" class="no-list">
            <img src="../../assets/images/home/ssjm_icon.png" alt="">
        </div>
    </div>
</template>
<script>
    export default {
        components: {
        },
        data() {
            return {
                keyWord:'',
                list:[],
                firstSearch:false,
            };
        },
        watch:{
        },
        created(){

        },
        mounted() {
            this.$nextTick(() => {
             });
        },
        methods: {
            getList(){
                util.ajax({
                    url:config.baseApi + 'bookMall-h5/api/item/getItemList',
                    data:{
                        keyWord:this.keyWord
                    },
                    success:(data=>{
                        this.firstSearch = true;
                        this.list = data.data;
                    })
                })
            },
            addBook(item){
                server.addShoppingCar(item.itemCode)
            }
        },
        
    };
</script>